<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
  </style>
  <script src="../lib/three/three.js"></script>
</head>

<body>

</body>

</html>

<script>
  const clock = new THREE.Clock()
  // 创建一个场景
  const scene = new THREE.Scene();

  // 创建一个相机 视点
  const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
  // 设置相机的位置
  camera.position.set(0, 0, 200);
  camera.lookAt(new THREE.Vector3(0, 0, 0));

  // 创建一个渲染器
  const renderer = new THREE.WebGLRenderer();
  renderer.setClearColor(0xffffff);
  // 设置渲染器尺寸
  renderer.setSize(window.innerWidth, window.innerHeight);

  document.body.appendChild(renderer.domElement);

  // 添加灯光
  const spotLight = new THREE.SpotLight(0xffffff);
  spotLight.position.set(2000, 8000, 4000);
  scene.add(spotLight);

  createSystemSprite()
  // 创建一个基础的粒子
  function createNormalSprite() {
    for (let i = -5; i < 5; i++) {
      for (let j = -5; j < 5; j++) {
        const material = new THREE.SpriteMaterial({
          color: Math.random() * 0xffffff
        })
        const sprite = new THREE.Sprite(material)
        sprite.position.set(i * 10, j * 10, 0);
        sprite.scale.set(2, 2, 2)
        scene.add(sprite)
      }
    }
  }

  // 粒子系统创建粒子
  function createSystemSprite() {
    const geometry = new THREE.Geometry();
    const material = new THREE.PointCloudMaterial({
      size: 4,
      vertexColors: true,
    })

    for (let i = -5; i < 5; i++) {
      for (let j = -5; j < 5; j++) {
        geometry.vertices.push(new THREE.Vector3(i * 10, j * 10, 0))
        geometry.colors.push(new THREE.Color(Math.random() * 0xffffff))
      }
    }

    scene.add(new THREE.PointCloud(geometry, material))
  }

  const animation = () => {
    // 渲染
    renderer.render(scene, camera);

    requestAnimationFrame(animation);
  }
  animation()
</script>